<template>
	<view class="page-classify page">
		<view class="b-header">
			<pageHeader title="分类" :showBack="false"></pageHeader>
			<tab :datas="tab" @tabClick="tabClick"></tab>
		</view>
		<view class="b-content hasFooter">
			<view class="df classify-container">
				<view class="classify-item df-cc" v-for="item in 6" :key="item">
					<image src="../../static/imgs/i2.png" mode=""></image>
					<view class="fz22">连衣裙</view>
				</view>
			</view>
			<view class="fsb wrap p-l-30 p-r-30 p-t-10">
				<productItem v-for="item in 10" :key="item"></productItem>
			</view>
			
		</view>
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	import productItem from '../../components/productItem.vue'
	export default {
		components: {
			tab,
			productItem
		},
		data() {
			return {
				tab:[
					{id:1,name:'女装'},
					{id:2,name:'男装'},
					{id:3,name:'包包'},
					{id:4,name:'配饰'},
					{id:5,name:'裤装'},
					{id:6,name:'裤装'},
					{id:7,name:'裤装'},
					{id:8,name:'裤装'},
					{id:9,name:'裤装'},
					{id:10,name:'裤装'},
				],
			}
		},
		methods: {
			tabClick(data){}
		}
	}
</script>

<style lang="scss">
	.page-classify {
		.b-content {
		}
	}
.classify-container {
	overflow-y: auto;
	padding: 40rpx 0  20rpx 0;
	align-items: flex-start;
	
	.classify-item {
		min-width: 160rpx;
		flex-direction: column;
		flex:1;
		flex-shrink: 0;
		color: #4C475A;
		image {
			width: 100rpx;
			height: 100rpx;
			border-raidus: 50%;
			margin-bottom: 20rpx;
		}
	}
}
</style>
